<template>
  <!-- 标题 -->
  <div id="intelligentInput">
    <div>Persona & Prompt</div>
    <!-- <el-input class="titleVal" size="large" v-model="titleVal" placeholder="Persona & Prompt" /> -->
    <!-- 内容 -->
    <el-input class="contentVal" v-model="contentVal" type="textarea"
      placeholder="Design the bot's persona, features and workflows just with natural language." />
    <el-select v-model="selectValue" class="mt-2" placeholder="请选择" size="large">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
// const titleVal = ref('')
const contentVal = ref('')
const selectValue = ref('')


const onInutData = () => {

  // 失焦提交intelligentInput
  if (!!contentVal.value && !!selectValue.value) {
    console.log(contentVal.value, selectValue.value);
  }
}
onMounted(() => {
  // intelligentInput存在多个焦点 无法通过某个失焦提交数据
  // 模拟div元素失焦
  document.addEventListener('click', (e) => {
    let typePanel = document.getElementById("intelligentInput");
    if (typePanel) {
      if (!typePanel.contains(e.target)) {
        onInutData()
      }
    }
  })
})


const options = [
  {
    value: '1',
    label: '基本信息生成',
  },
  {
    value: '2',
    label: '扩展信息生成',
  },
  {
    value: '3',
    label: '企业简介生成',
  },
]
</script>
<style lang="scss" scoped>
.mt-2 {
  width: 100%
}

.titleVal {
  margin-bottom: 20px;
}

::v-deep {
  .el-input__wrapper {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  }

  .el-textarea__inner {
    padding: 20px 0px;
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    resize: none;
  }
}
</style>
